<template>
	<view class="contactDetail">
		<view class="topSticky">
			<view class="topInfo flex_start_center">
				<u-image width="80" height="80" :src="info.head" :lazy-load="true"
					radius="4"></u-image>
				<view class="topInfoItem flex_column_between_start">
					<view class="topInfoTop flex_start_center">
						<text class="name">{{info.name}}</text>
						<text class="label">{{info.position}}</text>
					</view>
					<view class="companyName nowrap-ellipsis">
						{{info.company}}
					</view>
				</view>
				<u-button text="查看名片" type="primary" @tap="toCard"></u-button>
			</view>
			<u-gap height="12" bgColor="#F7F8FA"></u-gap>
		</view>
		<view class="list">
			<view class="item flex_start_center" v-for="(item,index) in list" :key="index" @tap="toChart(item)">
				<u-image width="80" height="80" :src="item.head" :lazy-load="true"
					radius="4"></u-image>
				<view class="itemInfo flex_column_between_start">
					<view class="itemInfoTop flex_start_center">
						<text class="name">{{item.name}}</text>
						<text class="label">{{item.position}}</text>
					</view>
					<view class="nowrap-ellipsis" style="width: 100%;">
						{{item.company}}
					</view>
				</view>
			</view>
			<view class="empty" v-if="!list.length && firstLoad">
				<u-empty text="未查询到人脉数据" mode="data" iconSize="100" textSize="32rpx" marginTop="20rpx"></u-empty>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	export default {
		data() {
			return {
				firstLoad: false,
				list: [],
				current: 0,
				activeStyle: {
					fontWeight: 600
				},
				info: {}
			}
		},
		onLoad(params) {
			if (!params.info) return
			this.info = JSON.parse(params.info)
			console.log(this.info,'this.info')
			this.queryCardByCondition()
		},
		methods: {
			//查看关系图
			toChart(item){
				console.log(item,'item')
				this.$toPage('/pagesCard/contacts/contactDetail?info=' + JSON.stringify(item))
			},
			//跳转名片
			toCard() {
				this.$toPage('/pagesCard/friendMainPage/friendMainPage?cardId=' +this.info.friendId+'&openId='+this.info.friendOpenId+'&unionId='+this.info.friendUnionId)
			},
			async queryCardByCondition() {
				let res = await this.$api.queryCardByCondition({
					openId: this.info.friendOpenId,
				})
				if (res.success) {
					this.list = res.result
				} else {
					this.$showToast('查询失败')
				}
				this.firstLoad = true
			},
		}
	}
</script>

<style lang="scss">
	page {
		width: 100%;
		height: 100%;
		background-color: #F7F8FA;
	}
	
	.contactDetail {
		.topSticky{
			position: sticky;
			top:0;
			z-index: 10;
			background-color: #fff;
		}
		.topInfo {
			padding: 20rpx 30rpx;
			height: 148rpx;
			.topInfoItem {
				flex: 1;
				min-width: 150rpx;
				padding-left: 24rpx;
				padding-top: 10rpx;

				.topInfoTop {
					color: #1D2129;
					font-size: 36rpx;
					font-weight: 600;

					.label {
						font-size: 28rpx;
						color: #4E5969;
						font-weight: normal;
						margin-left: 32rpx;
					}
				}

				.companyName {
					margin-top: 25rpx;
					font-size: 24rpx;
					color: #1D2129;
					width: 100%;
				}
			}

			::v-deep {
				.u-button {
					width: 176rpx !important;
					height: 56rpx !important;
					font-size: 28rpx !important;
				}
			}

		}

		.list {
			padding-bottom: calc(10rpx + env(safe-area-inset-bottom));
			.item {
				background-color: #fff;
				line-height: 1;
				height: 140rpx;
				padding: 0 32rpx;
				font-size: 28rpx;
				color: #86909C;
				
				.itemInfo {
					height: 80rpx;
					padding-left: 20rpx;
					flex: 1;
					min-width: 200px;

					.itemInfoTop {
						.name {
							font-size: 32rpx;
							color: #1D2129;
							font-weight: 600;
						}

						.label {
							font-size: 24rpx;
							padding: 4rpx 8rpx;
							background: #E9F0FD;
							color: #276AEE;
							border-radius: 4rpx;
							margin-left: 16rpx;
						}
					}
				}

			}
		}

		.empty {
			padding: 80rpx 0;

		}

	}
</style>